<template>
  <view class="activity_rules">
    <my-nav class-name="nav" title="手动下棋" />
    <view class="content">
      <view class="top">
        <view>
          <image src="/static/img/ji_shi.png" />
          <text style="margin-left: 8px">
            {{ dayjs.duration(state.time, "seconds").format("mm:ss") }}
          </text>
        </view>
        <view>
          <image src="/static/img/qi_zi.png" />
          <text class="xnum">X</text>
          <text style="width: 42px">{{ state.piece }}</text>
        </view>
      </view>
      <view class="center">
        <my-board :matrix="state.matrix" @click="myBoardClick" />
        <view class="btns">
          <view class="btn" @click="resetMatrix">重置棋盘</view>
          <view class="btn" @click="handSubmit">提交答案</view>
        </view>
      </view>
      <view class="buttom">
        <view class="title">游戏玩法</view>
        <view class="text">
          10皇后问题来源于国际象棋的玩法，“皇后”指皇后棋子，它可以在纵向、横向以及两个斜向上移动。而10皇后问题，就是要求如何布置10个皇后棋子，
          <text style="font-weight: bold;">使它们在10行10列的棋盘上，彼此不会存在同行、同列、同斜线和同反斜线的情况。</text>
        </view>
      </view>
    </view>
  </view>
  <my-activity-modal
    :show="state.modalNo"
    title="还有棋子在互斥的方向上"
    content="请找到棋盘上互斥的皇后们，调整它们的位置，继续完成挑战吧~"
    confirm-text="好的"
    @chnage="state.modalNo = false"
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -88px 0 8px"
        src="https://images-cloud.qboson.com/miniProgram/task_no.gif"
      />
    </template>
  </my-activity-modal>
  <my-activity-modal
    :show="state.modalOk"
    title="恭喜你得出可行解~"
    content="可以在【个人记录】里查看记录哦"
    @chnage="
      state.modalOk = false;
      navigateBack();
    "
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -88px 0 8px"
        src="https://images-cloud.qboson.com/miniProgram/task_ok.gif"
      />
    </template>
  </my-activity-modal>
  <my-activity-modal
    :show="state.modalNew"
    title="恭喜你得出首次可行解！"
    confirm-text="开心收下"
    @chnage="
      state.modalNew = false;
      navigateBack();
    "
  >
    <template #icon>
      <image
        style="width: 160px; height: 160px; margin: -125px 0 4px"
        src="https://images-cloud.qboson.com/miniProgram/task_new.png"
      />
    </template>
    <view style="margin-bottom: 24px; color: #963e32; text-align: center">
      <view style="margin: 2px 0 20px; font-size: 12px">
        每次手算得出首次可行解，都会奖励一次配额
      </view>
      <text style="font-size: 44px; font-weight: 800">1</text>
      <text style="margin-left: 5px; font-size: 14px">配额</text>
    </view>
  </my-activity-modal>
</template>

<script setup lang="ts">
import { onUnload } from "@dcloudio/uni-app";
import { reactive } from "vue";
import dayjs from "dayjs";
import myNav from "@/components/my-nav.vue";
import myBoard from "@/components/my-board.vue";
import myActivityModal from "@/components/my-activity-modal.vue";
import Api from "@/utils/http";

const { navigateBack } = uni;
const state = reactive({
  time: 0,
  piece: 10,
  matrix: Array(10)
    .fill([])
    .map(() => Array(10).fill(0)),
  modalNo: false,
  modalOk: false,
  modalNew: false,
});

let interval = 0;
onUnload(() => {
  clearInterval(interval);
});

const myBoardClick = (val: number, x: number, y: number) => {
  if (!interval) {
    interval = setInterval(() => {
      state.time++;
    }, 1000);
  }

  if (val === 0 && state.piece > 0) {
    state.matrix[x][y] = 1;
    state.piece--;
  } else if (val === 1) {
    state.matrix[x][y] = 0;
    state.piece++;
  }
};

const resetMatrix = () => {
  state.piece = 10;
  state.matrix = Array(10)
    .fill([])
    .map(() => Array(10).fill(0));
};
const handSubmit = async () => {
  if (state.piece !== 0) {
    return uni.showToast({
      icon: "none",
      title: "还有棋子没下完哦~",
    });
  }

  state.matrix.forEach((item) => {
    item.forEach((v, k) => {
      if (v === -1) item[k] = 1;
    });
  });
  const res: any = await Api.post(
    "queen/submit/",
    {
      board: state.matrix,
      consuming_time: state.time,
    },
    { returnCode: true }
  );

  if (res.code === "400") {
    state.modalNo = true;
    return (state.matrix = res.data);
  } else if (res.code === "200") {
    state.modalOk = true;
  } else if (res.code === "0") {
    state.modalNew = true;
  }
  clearInterval(interval);
};
</script>

<style scoped lang="scss">
.activity_rules {
  height: 100vh;
  overflow: auto;
  @mixin back {
    background: radial-gradient(
        67% 16% at 85% -1%,
        #ffe6db 0%,
        rgba(255, 232, 177, 0) 100%
      ),
      radial-gradient(
        145% 79% at 17% 0%,
        rgba(255, 174, 139, 0.6) 0%,
        rgba(255, 222, 190, 0.6) 40%,
        rgba(255, 255, 255, 0.6) 100%
      ),
      #f8f8f8;
    background-size: 100% 100vh;
  }
  @include back;
  ::v-deep .nav {
    @include back;
  }

  .content {
    padding: 32px 25px;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      padding: 0 16px;
      border-radius: 12px;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        #ffffff 100%
      );
      border: 1px solid;
      border-image: linear-gradient(
          101deg,
          rgba(255, 255, 255, 0.15) 2%,
          rgba(255, 255, 255, 0.8) 39%,
          rgba(255, 255, 255, 0.2) 100%
        )
        1;
      view {
        display: flex;
        align-items: center;
        image {
          width: 24px;
          height: 24px;
        }
        text {
          text-align: center;
          font-size: 24px;
          font-weight: 600;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.6);
        }
        .xnum {
          margin: 0 2px;
          font-size: 12px;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }

    .center {
      margin-top: 24px;
      .btns {
        display: flex;
        gap: 16px;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 46px;
          margin-top: 32px;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 500;
          color: #ffffff;
        }
        .btn:nth-child(1) {
          width: 114px;
          background: linear-gradient(
            180deg,
            #3edaf9 0%,
            #1dbabf 100%,
            #009da2 100%
          );
          box-shadow:
            inset 0px -1px 5px 0px rgba(255, 255, 255, 0.5),
            inset 0px 10px 20px 0px #41f2ff;
        }
        .btn:nth-child(2) {
          flex: 1;
          background: radial-gradient(
              3% 0% at 98% 52%,
              #ffe9c2 0%,
              rgba(255, 216, 149, 0) 100%
            ),
            radial-gradient(
              32% 2% at 47% 95%,
              #ffd792 0%,
              rgba(255, 216, 149, 0) 100%
            ),
            linear-gradient(
              292deg,
              #ffc986 9%,
              #fd9869 19%,
              #ff8940 42%,
              #ff6836 56%
            );
          box-shadow:
            inset 0px -1px 5px 0px rgba(255, 255, 255, 0.5),
            inset 0px 10px 20px 0px #ffab71;
        }
      }
    }

    .buttom {
      margin-top: 33px;
      .title {
        font-size: 15px;
        font-weight: 600;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.6);
      }
      .text {
        margin-top: 12px;
        font-size: 13px;
        font-weight: 400;
        line-height: 180%;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
}
</style>
